<template>
  <div class="order-contain">
    <van-tabs v-model="active">
      <van-tab title="全部">
        <order
          :orderList="allOrderList"
          @cancel="cancel"
          @delOrder="delOrder"
          @sendGoods="sendGoods"
        ></order>
      </van-tab>
      <van-tab title="未付款">
        <order :orderList="notPayOrderList" @cancel="cancel"></order>
      </van-tab>
      <van-tab title="已付款">
        <order :orderList="payOrderList" @sendGoods="sendGoods"></order>
      </van-tab>
      <van-tab title="完成">
        <order :orderList="finishOrderList"></order>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { Dialog, Toast } from "vant";
import { reqgetuserOrder, reqcancelOrder, reqdelOrder } from "@/api";
import order from "@/components/Orders.vue";
import { ref, onMounted } from "vue";

const active = ref(0);
const allOrderList = ref([]);
const notPayOrderList = ref([]);
const payOrderList = ref([]);
const finishOrderList = ref([]);

const getUserOrder = async () => {
  let data = await reqgetuserOrder();
  allOrderList.value = data;
  data.forEach((item) => {
    // 未付款的订单
    if (item.status == 0) {
      notPayOrderList.value.push(item);
    }
    // 已付款的订单
    if (item.status == 1) {
      payOrderList.value.push(item);
    }
    // 完成的订单
    if (item.is_finish == 1) {
      finishOrderList.value.push(item);
    }
  });
};

const cancel = (id) => {
  Dialog.confirm({
    message: "确认要取消订单吗？",
  })
    .then(async () => {
      await reqcancelOrder(id);
      allOrderList.value = [];
      notPayOrderList.value = [];
      payOrderList.value = [];
      finishOrderList.value = [];
      getUserOrder();
    })
    .catch(() => {});
};

const delOrder = (id) => {
  Dialog.confirm({
    message: "确认要删除订单吗？",
  })
    .then(async () => {
      let data = await reqdelOrder(id);
      let { message } = data;
      Toast(message);
      allOrderList.value = [];
      notPayOrderList.value = [];
      payOrderList.value = [];
      finishOrderList.value = [];
      getUserOrder();
    })
    .catch(() => {});
};

const sendGoods = () => {
  Toast("已提醒商家");
};

onMounted(() => {
  getUserOrder();
});
</script>

<style lang="scss" scoped>
.order-contain {
  .order {
    padding: 10px 15px;
    margin: 10px 0;
    // max-height: 165px;
    background: #fff;

    .van-divider {
      margin: 7px 0;
    }

    .goods {
      display: flex;
      justify-content: space-between;
      height: 88px;

      img {
        width: 88px;
        height: 88px;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        font-size: 12px;

        .price {
          font-size: 16px;
        }
      }
    }

    .footer {
      .text {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 12px;
      }

      .btn {
        display: flex;
        flex-direction: row-reverse;

        .van-tag {
          padding: 4px 2px;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>
